<template>
	<view class="login-page">
		<!-- 顶部Logo -->
		<view class="logo-container">
			<image :src="$imgUrl + '/static/logo.png'" mode="widthFix" class="logo"></image>
		</view>
		<!-- 登录方式切换 -->
		<view class="login-tab">
			<text :class="{ active: loginType === 'code' }" @click="changeLoginType('code')">验证码登录</text>
			<text :class="{ active: loginType === 'password' }" @click="changeLoginType('password')">密码登录</text>
			<view class="tab-line" :style="{ left: loginType === 'code'? '8%' : '84%' }"></view>
		</view>

		<!-- 验证码登录表单 -->
		<view class="login-form" v-if="loginType === 'code'">
			<view class="form-item">
				<input v-model="phone" type="number" placeholder="请输入手机号" placeholder-style="color:#999"></input>
			</view>
			<view class="form-item code-item">
				<input v-model="code" type="number" placeholder="验证码" placeholder-style="color:#999"></input>
				<text class="countdown" v-if="countdown > 0">{{ countdown }}s</text>
				<text class="get-code" v-else @click="getCode">{{ getCodeText }}</text>
			</view>
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<label>
						<checkbox class="checkbox" :checked="agreed"></checkbox>
					</label>
				</checkbox-group>
				<text>我已阅读并同意</text>
				<text class="agreement-link" @click="goToUserAgreement(1)">《用户协议》</text>
				<text>和</text>
				<text class="agreement-link" @click="goToUserAgreement(2)">《隐私政策》</text>
			</view>
			<button type="primary" @click="loginByCode"
				style="display: flex;justify-content: center;align-items: center;">登录</button>
			<!-- <text class="one-key-login" @click="oneKeyLogin">本机号码一键登录</text> -->
		</view>

		<!-- 密码登录表单 -->
		<view class="login-form" v-else>
			<view class="form-item">
				<input v-model="account" type="text" placeholder="请输入账号" placeholder-style="color:#999"></input>
			</view>
			<view class="form-item">
				<input v-model="password" type="password" placeholder="请输入密码" placeholder-style="color:#999"></input>
			</view>
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<label>
						<checkbox class="checkbox" :checked="agreed"></checkbox>
					</label>
				</checkbox-group>
				<text>我已阅读并同意</text>
				<text class="agreement-link" @click="goToUserAgreement(1)">《用户协议》</text>
				<text>和</text>
				<text class="agreement-link" @click="goToUserAgreement(2)">《隐私政策》</text>
			</view>
			<button type="primary" @click="loginByPassword"
				style="display: flex;justify-content: center;align-items: center;">登录</button>
			<!-- <text class="one-key-login" @click="oneKeyLogin">本机号码一键登录</text> -->
		</view>

		<!-- 本机号码一键登录页面 -->
		<view class="one-key-login-page" v-if="loginType === 'oneKey'">
			<text class="phone-number">{{ maskedPhone }}</text>
			<text class="service-info">中国移动提供认证服务</text>
			<text class="change-phone" @click="changeLoginType('code')">使用其他手机></text>
			<button type="primary" @click="oneKeyLogin"
				style="display: flex;justify-content: center;align-items: center;">本机号码一键登录</button>
			<view class="agreement">
				<checkbox-group @change="handleAgreementChange">
					<label>
						<checkbox class="checkbox" :checked="agreed"></checkbox>
					</label>
				</checkbox-group>
				<text>我已阅读并同意</text>
				<text class="agreement-link" @click="goToUserAgreement(1)">《中国移动认证服务条款》</text>
				<text>和</text>
				<text class="agreement-link" @click="goToUserAgreement(2)">《用户协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		accountLogin,
		getInfo,
		phoneLogin,
		sms
	} from "@/api/loginApi/login.js"
	export default {
		data() {
			return {
				loginType: 'code',
				phone: '',
				code: '',
				countdown: 0,
				getCodeText: '获取验证码',
				account: '',
				password: '',
				agreed: false,
				userPhone: '132****7846'
			};
		},
		computed: {
			maskedPhone() {
				// 对本机号码进行脱敏处理
				const start = 3;
				const end = this.userPhone.length - 4;
				return this.userPhone.slice(0, start) + '*'.repeat(end - start) + this.userPhone.slice(end);
			}
		},
		methods: {
			// 切换登录类型
			changeLoginType(type) {
				this.loginType = type;
				this.countdown = 0;
				this.getCodeText = '获取验证码';
			},
			// 获取验证码
			getCode() {
				if (this.phone) {
					sms({
						phone: this.phone
					}).then(res => {
						if (res.code == 200) {
							this.countdown = 60;
							this.getCodeText = '倒计时';
							const timer = setInterval(() => {
								this.countdown--;
								if (this.countdown === 0) {
									clearInterval(timer);
									this.getCodeText = '获取验证码';
								}
							}, 1000);
						}
					})

				} else {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
				}
			},
			handleAgreementChange(e) {
				if (e.detail.value.length) {
					this.agreed = true
				} else {
					this.agreed = false
				}
			},
			// 跳转到用户协议页面
			goToUserAgreement(value) {
				uni.navigateTo({
					url: `/pagesIndex/agreement/agreement?value=${value}`
				})
			},
			// 验证码登录
			loginByCode() {
				if (!this.agreed) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					});
					return;
				}
				if (this.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				uni.login({
					success: (res) => {
						phoneLogin({
							phone: this.phone,
							sms_code: this.code,
							code: res.code
						}).then(res => {
							if (res.code == 200) {
								uni.setStorageSync("token", res.data.access_token)
								getInfo().then(res => {
									if (res.code == 200) {
										uni.showToast({
											icon:"none",
											title:"登陆成功"
										})
										uni.setStorageSync("unserInfo", res.data)
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/index/index"
											})
										}, 1500)
									}
								})
							}
						})
					}
				})
			},
			// 密码登录
			loginByPassword() {
				// uni.navigateTo({
				// 	url:"/pagesUser/addStorePrinter/addStorePrinter"
				// })
				// return
				if (!this.agreed) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					});
					return;
				}
				if (this.account == '') {
					uni.showToast({
						icon: "none",
						title: '请输入账号'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						icon: "none",
						title: '请输入密码'
					})
					return
				}
				uni.login({
					success: (res) => {
						accountLogin({
							account: this.account,
							password: this.password,
							code: res.code
						}).then(res => {
							if (res.code == 200) {
								uni.setStorageSync("token", res.data.access_token)
								getInfo().then(res => {
									if (res.code == 200) {
										uni.showToast({
											icon:"none",
											title:"登陆成功"
										})
										uni.setStorageSync("unserInfo", res.data)
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/index/index"
											})
										}, 1500)
									}
								})
							}
						})
					}
				})
			},
			// 本机号码一键登录
			oneKeyLogin() {
				// if (!this.agreed) {
				// 	uni.showToast({
				// 		title: '请先同意相关协议',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				console.log('执行本机号码一键登录操作');
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync("unserInfo")
			this.account = userInfo.account
		}
	};
</script>

<style lang="scss">
	.login-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 100vh;
		background: linear-gradient(180deg, #E0EEFF 21%, #FFFFFF 100%);

		.logo-container {
			margin-bottom: 60rpx;
			margin-top: 160rpx;

			.logo {
				width: 277rpx;
				height: 181rpx;
			}
		}

		.login-tab {
			display: flex;
			width: 600rpx;
			justify-content: space-between;
			margin-bottom: 40rpx;
			position: relative;

			text {
				font-size: 36rpx;
				color: #666;
				padding-bottom: 10rpx;
			}

			.active {
				color: #333;
				font-weight: bold;
			}

			.tab-line {
				position: absolute;
				bottom: -10rpx;
				width: 52rpx;
				height: 14rpx;
				background-color: #3385ff;
				transition: left 0.5s ease;
			}
		}

		.login-form {
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

			.form-item {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				padding: 20rpx 0;

				input {
					flex: 1;
					font-size: 30rpx;
					color: #333;
					border: none;
					outline: none;
					padding: 10rpx;
				}
			}

			.code-item {
				justify-content: space-between;
				align-items: center;

				.countdown {
					color: #3385ff;
					font-size: 28rpx;
				}

				.get-code {
					color: #3385ff;
					font-size: 28rpx;
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				margin: 60rpx 0;

				checkbox {
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #666;
				}

				.agreement-link {
					color: #3385ff;
				}
			}

			button {
				width: 100%;
				height: 90rpx;
				border-radius: 40rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.one-key-login {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #3385ff;
			}
		}

		.one-key-login-page {
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;

			.phone-number {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
			}

			.service-info {
				font-size: 28rpx;
				color: #999;
				margin-bottom: 20rpx;
			}

			.change-phone {
				font-size: 28rpx;
				color: #3385ff;
				margin-bottom: 30rpx;
			}

			button {
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.agreement {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				checkbox {
					margin-right: 10rpx;
				}

				text {
					font-size: 28rpx;
					color: #666;
				}

				.agreement-link {
					color: #3385ff;
				}
			}
		}
	}
</style>